<!--
 * @Author: 'zhangkeqq' '2211709169@qq.com'
 * @Date: 2025-07-29 14:42:28
 * @LastEditors: 'zhangkeqq' '2211709169@qq.com'
 * @LastEditTime: 2025-07-29 14:54:45
 * @FilePath: \vue3-admin-node\vue3-admin\src\views\user_manage\components\edit_user.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<el-dialog v-model="dialogFormVisible" title='编辑用户信息' width="600px" align-center draggable>
		<div class="dialog-content">
			<el-form ref="ruleFormRef" :model="formData" :rules="rules" label-width="100px">
				<el-form-item label="账号" prop="account">
					<el-input v-model="formData.account" disabled />
				</el-form-item>
				<el-form-item label="姓名" prop="name">
					<el-input v-model="formData.name" />
				</el-form-item>
				<el-form-item label="性别" prop="sex">
					<el-select v-model="formData.sex" placeholder="请选择性别">
						<el-option label="男" value="男" />
						<el-option label="女" value="女" />
					</el-select>
				</el-form-item>
				<el-form-item label="邮箱" prop="email">
					<el-input v-model="formData.email" />
				</el-form-item>
				<el-form-item label="部门" prop="department">
					<el-select v-model="formData.department" placeholder="请选择部门">
						<el-option v-for="item in departmentData" :key="item" :label="item" :value="item" />
					</el-select>
				</el-form-item>
			</el-form>
		</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="editUser">
					确定
				</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import {ref,reactive} from 'vue'
import {editAdmin} from '@/api/userinfo/index'
import {getDepartment} from '@/api/setting/index'
import { ElMessage } from "element-plus"
const dialogFormVisible = ref<boolean>(false)
const formData = reactive({
    id:0,
    account:0,
    name:'',
    sex:'',
    email:'',
    department:'',
    identity: '用户'
})
	const rules = reactive({
		name: [
			{ required: true, message: '请输入要修改的名字', trigger: 'blur' },
		],
		sex: [
			{ required: true, message: '请输入要修改的性别', trigger: 'blur' },
		],
		email: [
			{ required: true, message: '请输入要修改的邮箱', trigger: 'blur' },
		],
		department: [
			{ required: true, message: '请输入要修改的部门', trigger: 'blur' },
		],
	})
const departmentData = ref([])
const returnDepartment = async()=>{
	const res = await getDepartment()
	if(res.status == 0){
		departmentData.value = JSON.parse(res.data)
	}
}
returnDepartment()


//确定
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const editUser = async()=>{
    const res = await editAdmin(formData)
		if (res.status == 0) {
			ElMessage({
				message: '编辑用户信息成功',
				type: 'success',
			})
			emit('success')
			dialogFormVisible.value = false
		} else {
			ElMessage.error('编辑用户信息失败')
			dialogFormVisible.value = false
		}
}

// 打开编辑管理员的弹窗
	const open = (userData:any) => {
        Object.assign(formData,userData)
		dialogFormVisible.value = true
	}

	defineExpose({
		open
	})
</script>

<style lang="scss" scoped>
	.dialog-content {
		display: flex;
		padding: 20px 30px;
	}

	:deep(.el-form-item) {
		margin: 30px;
	}
</style>
